<block name='deskmain'>
<!-- Attention:
1 - block must defined inside div-id since JS will work by div-id
2 - you can dynamicly remove any block by thinkPHP template rule
-->
<!-- deskmain Layout:
!!!!!!!!!!!!!!!!! deskmain !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
~~~~~~~~~~~~~~~~~ deskFrame ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
==========================================================
~~~~~~~~~~~~~~~~~ deskTopBar ~~~~~~~~~~~~~~~~~~~~~~~~~~~
deskTopBarToolBar    | deskTopBarAlert
(tool bar on desk top ) | (alert message on desk top)
~~~~~~~~~~~~~~~~~ end of deskTopBar ~~~~~~~~~~~~~~~~~~~~
==========================================================
~~~~~~~~~~~~~~~~~ deskBody (must) ~~~~~~~~~~~~~~~~~~~~~~
deskBodySideMenu |   deskBodyMainBody
(Menu for APP)      |   (main display body for APP)
(auto hide if none) |   (auto-width if no sideMenu)
~~~~~~~~~~~~~~~~~ end of deskBody ~~~~~~~~~~~~~~~~~~~~~~
==========================================================
~~~~~~~~~~~~~~~~~ end of deskFrame~~~~~~~~~~~~~~~~~~~~~~~
-->

<div id="deskFrame">
    <block name="deskTopBar">
    <div id="deskTopBar" class="col-xs-12">
        <div id="deskTopBarToolBar" class="col-md-6 btn-toolbar" role="toolbar" aria-label="...">
            <div class="btn-group btn-group-lg btn-group-primary" role="group" aria-label="...">
                <button id="sideMenuToggle" onclick="javascript:toggleSideMenu();" type='button' class="btn btn-success" >
                    <span class="glyphicon glyphicon-list"></span>
                </button>
            </div>

            <div class="btn-group btn-group-lg" role="group" aria-label="...">
                <button type="button" class="btn btn-primary">1</button>
                <button type="button" class="btn btn-primary">2</button>
                <button type="button" class="btn btn-primary">3</button>
            </div>
            <div class="btn-group btn-group-lg" role="group" aria-label="...">
                <button type="button" class="btn btn-danger">1</button>
                <button type="button" class="btn btn-danger">2</button>
                <button type="button" class="btn btn-danger">3</button>
            </div>
        </div>

        <div id='deskTopBarAlert' class="col-md-6 alert alert-warning alert-dismissible" role="alert" style="margin-bottom:0px">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <p class='alert-content'>Better check yourself, you're not looking too good.</p>
        </div>
    </div>
    </block>

    <block name="deskBody">
    <div id='deskBody' class="col-xs-12" >

        <div id="deskBodySideMenu" class="col-xs-2">
        <block name="deskBodySideMenu">
            <ul class="list-group mainmenu">
                <a href="#" class="list-group-item active">MainMenu1</a>
                <a href="#" class="list-group-item">MainMenu2</a>
                <a href="#" class="list-group-item">MainMenu3</a>
                <a class="list-group-item">MainMenu4</a>
                    <ul class="list-group collpase">
                        <a href="#" class="list-group-item">SubMenu1</a>
                        <a href="#" class="list-group-item">SubMenu2</a>
                    </ul>
                <a class="list-group-item hassub subclose" data-toggle="collapse" href="#submenu5">MainMenu5</a>
                    <ul id="submenu5" class="list-group collapse">
                        <a href="#" class="list-group-item">SubMenu1</a>
                        <a href="#" class="list-group-item">SubMenu2</a>
                    </ul>
            </ul>
        </block>
        </div>
        
        <div id="deskBodyMainBody" class="col-xs-10">
            <block name="deskBodyMainBody"></block>
        </div>
    </div>
    </block>
</div>

<!-- dynamic modal dialog -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">请确认操作！</h4>
      </div>
      <div class="modal-body myconfirmtext">
       确认提示文字
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="return false;">Cancel</button>
        <button type="button" class="btn btn-primary" onclick="return true;">Confirm</button>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
    //弹出式调试信息窗口
    function myConfirm( confirmText ){
        $('.myconfirmtext').text( confirmText );
        var result = $('#myModal').modal('show');
        console.log( 'result:' + result );
        return false;
    }
</script>

<script type="text/javascript">
//左侧菜单-子菜单-折叠样式-加减号图标-显示隐藏动画
var orgSideMenuWidth = $('#deskBodySideMenu').attr('class'); //初始宽度，供菜单隐藏显示动态调整宽度用
var orgMainBodyWidth = $('#deskBodyMainBody').attr('class'); //初始宽度，供菜单隐藏显示动态调整宽度用

//初始化SideMenu
//-检查是否有SideMenu条目存在，存在则显示侧边菜单，不存在则隐藏侧边菜单
//-子菜单自动添加id，父菜单自动添加折叠功能及对应id及右侧加减号图标
function initSideMenu(){
    if( $('.mainmenu').length>0 ){
        var subid=1; //累计包含子菜单的父菜单个数
        $("a.list-group-item ~ ul.list-group").each( function(){ //对所有的子菜单执行
            var submenuid = 'submenu' + subid++ ; //生成子菜单id串
            $(this).attr( 'id', submenuid ); //设置子菜单id
            $(this).addClass( 'collapse submenu' ); //设置子菜单折叠及风格
            //设置父菜单折叠属性及折叠对应的子菜单及风格-右边加减号图标
            $(this).prev().addClass('hassub collapsed subclose').attr( 'data-toggle','collapse' ).attr( 'href','#'+submenuid ); 
        });
        //菜单显示的动画
        $('#deskBodySideMenu').removeClass().addClass('menuhide');
        toggleSideMenu();
    }else{
        //禁用SideMenu开关
        $('#sideMenuToggle').addClass('disabled');
        //菜单隐藏的动画
        $('#deskBodySideMenu').removeClass().addClass('menushow');
        toggleSideMenu();
    }
}
//显示隐藏SideMenu
function toggleSideMenu() {
    if( $('#deskBodySideMenu').hasClass('menushow') ){
        //当前已显示，转为隐藏，先进行隐藏动画，再调整各自宽度
        $('#deskBodySideMenu').removeClass().addClass( orgSideMenuWidth + ' menuhide animated fadeOutLeft');
        $('#deskBodySideMenu').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', toggledeskBodyMainBody);
    }else{
        //当前已隐藏，转为显示，先调整宽度，再进行动画
        $('#deskBodyMainBody').removeClass().addClass( orgMainBodyWidth );
        $('#deskBodySideMenu').removeClass().addClass( orgSideMenuWidth + ' menushow animated fadeInLeft');
    }
}
//SideMenu隐藏动画完成后更新MainBody宽度
function toggledeskBodyMainBody() {
    if( $('#deskBodySideMenu').hasClass('menushow') ){
    }else{
        //SideMenu隐藏动画完成后，设置SideMenu为hidden，修改MainBody宽度
        $('#deskBodySideMenu').removeClass().addClass('hidden');
        $('#deskBodyMainBody').removeClass().addClass('col-xs-12');
    }
}

    //子菜单展开后，修改父菜单右边的加号图标为减号图标，折叠其它展开的子菜单
    $('.collapse').on('show.bs.collapse', function () {
        //$(this).prev().removeClass('subclose').addClass('subopen'); //修改父菜单右边的加号图标为减号图标
        $('.collapse').collapse('hide'); //折叠其它展开的子菜单
    }); 
    //子菜单折叠后，修改父菜单右边的减号图标为加号图标
    $('.collapse').on('hidden.bs.collapse', function () {
        //$(this).prev().removeClass('subopen').addClass('subclose');
    });

//初始化菜单
initSideMenu();

//闭包匿名函数，立刻执行
$( function () { 
});

</script>

</block>